<template>
  <div class="record-index" ref="recordBoxRef" v-loading="loading">
    <p class="record-title">记录</p>
    <div class="record-main">
      <div class="record-item">
        <p class="record-date">{{props.date.slice(0, 10)}}</p>
        <el-timeline>
          <el-timeline-item hide-timestamp v-for="(item, index) of planList" :key="index" :timestamp="item.visitTime">
            <div class="record-content" @click="toEdit(item)">
              <div class="content">
                <span class="visit-time">{{item.visitTime}}</span>
                <el-avatar :size="30" />
                <span class="visit-active">{{ item.visitorName }}</span>
                <span>计划拜访</span>
                <span class="visit-active">{{item.visiteesName}}</span>
              </div>

              <div @click.stop="deleteBtn(item.id)" class="delete-icon">
                <el-icon><Delete /></el-icon>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>

        <el-empty v-if="!planList.length" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {defineComponent, ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {deletePlan, exitPeers, getPlanByDate} from "@/api/plan";
import {Delete} from "@element-plus/icons-vue";

const route = useRoute();
const router = useRouter();
const props = defineProps({
  date: {
    type: String,
    default: ''
  }
});
const emit = defineEmits(['refresh']);
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const planList = ref<Record<string, any>[]>([]);
const recordBoxRef = ref<any>();
const loading = ref(false);

function toEdit(item: any) {
  router.push({
    path: 'calendarDetail',
    query: {
      date: props.date,
      id: item.id
    }
  })
}

function toFill() {
  router.push({
    path: 'calendarDetail',
    query: {
      date: props.date
    }
  })
}

async function deleteBtn(id: string) {
  try {
    await proxy?.$modal.confirm('是否确认删除该拜访计划？')
    const data = await deletePlan(id)
    if (data.code === 200) proxy?.$modal.msgSuccess('删除成功')
    getData()
    emit('refresh')
  } catch (error) {
    console.log(error)
  }
}

function getData() {
  planList.value = [];
  loading.value = true;
  const date = props.date ? props.date.slice(0, 10) : '';
  getPlanByDate(date).then((res: any) => {
    planList.value = res.data || []
  }).finally(() => loading.value = false)
}

getData();

watch(() => props.date, () => {
  getData()
})

defineExpose({toFill})

defineComponent({name: 'CalendarRight'})
</script>

<style scoped lang="scss">
.record-index {
  position: relative;
  width: 100%;
  height: calc(100% - 540px);
  padding: 20px;
  background-color: #fff;

  .record-title {
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 20px;
    color: #2E3244;
  }

  .record-main {
    width: 100%;
    margin-top: 30px;

    .record-item {
      margin-bottom: 10px;

      .record-date {
        display: inline-block;
        margin-bottom: 20px;
        padding: 0 10px;
        height: 30px;
        color: #2E3244;
        font-size: 14px;
        background: #eee;
        line-height: 30px;
      }

      .visit-time {
        margin-right: 6px;
      }

      .visit-active {
        margin: 0 6px;
        color: #FF4350;
      }

      .record-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        cursor: pointer;

        &:hover .delete-icon {
          display: block;
        }

        .content {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
        }

        .delete-icon {
          display: none;
        }
      }
    }
  }
}
</style>
